<template>
	<view class="card">
		<!-- Content Header Satrt -->
		<!-- <template v-if="param.level !== 1">
            <view
                class="flex justify-between card--header"
                @click="goPage(`/bundle/pages/category_goods_list/index?id=${pid}`)"
            >
                <view class="name">{{ param.name }}</view>
                <view class="flex">
                    <u-icon name="arrow-right" size="22"></u-icon>
                </view>
            </view>
        </template> -->
		<view class="flex justify-between card--header">
			<view class="name">{{ param.name }}</view>
		</view>
		<!-- Content Header End -->

		<!-- Content Main Start -->
		<view class="card--main">
			<block v-for="item4 in goodsData" :key="item4.id">
				<view class="goods flex" @click="goPage(`/pages/goods/index?id=${item4.id}`)">
					<view style="border-radius: 20rpx;overflow: hidden;">
						<u-image :src="item4.image" width="100%" height="210rpx"></u-image>
					</view>
					<view class=" mt-[20rpx] truncate item-name-text">{{ item4.name }}</view>
					<view class="text-primary mt-[20rpx]">
						<price :price="item4.price" :desc="item4.unit"></price>
					</view>
				</view>
			</block>
		</view>
		<!-- Content Main End -->
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, watchEffect } from 'vue'
	import { apiGoodsLists } from '@/api/store'
	import Price from '@/components/price/index.vue'
	import { useAppStore } from '@/stores/app'

	const { getImageUrl } = useAppStore()
	/** Interface Start **/
	interface GoodsDataObj {
		id : number
		name : string
		image : string
		remarks : string
		price : string
		unit : string
	}
	/** Interface End **/

	/** Props Start **/
	const props = withDefaults(
		defineProps<{
			param ?: any // 底部
			pid : any
		}>(),
		{
			param: {
				id: 0,
				name: ''
			},
			pid: 0
		}
	)
	/** Props End **/

	/** Data Start **/
	const goodsData = ref<Array<GoodsDataObj> | null | any>([])
	/** Data End **/

	/** Methods Start **/
	/**
	 * @return { Promise }
	 * @description 初始化分类商品
	 */
	const initGoodsLists = async () : Promise<void> => {
		const res : any = await apiGoodsLists({ categoryId: props.param.id })
		goodsData.value = res.lists
	}

	/**
	 * @param { String } url
	 * @return { Promise }
	 * @description 跳转页面
	 */
	const goPage = (url : string) => {
		uni.navigateTo({
			url: url
		})
	}
	/** Methods End **/

	if (props.param.id) {
		initGoodsLists()
	}
</script>

<style lang="scss" scoped>
	.card {
		margin-bottom: 20rpx;
		border-radius: 14rpx;
		padding-bottom: 20rpx;
		background-color: #ffffff;

		&--header {
			color: #888888;
			padding: 26rpx 30rpx;
			padding-bottom: 0;
			font-size: 32rpx;

			.name {
				font-weight: 500;
				color: #222222;
				font-size: 28rpx;
			}
		}

		&--main {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-auto-rows: 1fr;
			gap: 20rpx;
			padding: 0 21rpx;

			.goods {
				padding-top: 26rpx;
				display: inline-block;
				width: 100%;
				height: 100%;
				min-height: 0;
				min-width: 0;
			}
		}
	}

	.item-name-text {
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 400;
		font-size: 24rpx;
		color: #303133;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
</style>